{% extends 'index.html' %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-align-justify "></i>Ansible剧本列表</h1>
         </div>
                <!-- /.col-lg-12 -->
         
    </div>
    <div class="row">
         <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            	<i class="fa fa-database"></i>剧本列表明细
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="deployTableList">
                                <thead>
                                    <tr>
                                    	<th class="text-center">剧本名称</th>
                                    	<th class="text-center">剧本uuid</th>
                                        <th class="text-center">描述</th>
                                        <th class="text-center">剧本文件</th>
                                        <th class="text-center">目标服务器</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	{% for ds in playbookList %}
                                		<tr class="odd gradeX">
                                			<td class="text-center">{{ds.playbook_name}} </td>
                                			<td class="text-center">
                                				{{ds.playbook_uuid}}
                                			</td class="text-center">
                                			<td class="text-center">
                                				{{ds.playbook_desc|default:""}} 
                                			</td>
                                			<td class="text-center">
                                				<button type="button"  class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="getAnsiblePlayBookFile(this,{{ds.id}})"><i class="fa  fa-eye  "></i></button>
                                			</td>                                			
                                			<td class="text-center">
                                				<button type="button" class="btn btn-default" title="成员"  
														data-container="body" data-toggle="popover" data-placement="top" 
														data-content="
														{% for ds in ds.ansible_playbook_number %}
															{{ds.playbook_server}}<br>
														{% endfor %} 
														" data-html="true">
													<i class="fa  fa-group"></i>
												</button> 
                                			</td>
                                			<td class="text-center">
												{% if ds.runid or user.is_superuser %}
													<a href="/apps/playbook/modf/{{ds.id}}"><button  type="button" class="btn btn-default"><abbr title="修改资料"><i class="glyphicon glyphicon-edit"></i></button></a>
													<a href="/apps/playbook/run/{{ds.id}}"><button  type="button" class="btn btn-default"><abbr title="运行剧本"><i class="fa fa-play-circle-o"></i></button></a> 
													<button  type="button" class="btn btn-default" onclick="deletePlayBook(this,{{ds.id}})"><abbr title="删除"><i class="glyphicon glyphicon-trash"></i></button>    
												{% else %}
													<button  type="button" class="btn btn-default" disabled><abbr title="修改资料"><i class="glyphicon glyphicon-edit"></i></button>
													<button  type="button" class="btn btn-default" disabled><abbr title="没有权限"><i class="fa fa-play-circle-o"></i></button>  
													<button  type="button" class="btn btn-default" disabled><abbr title="删除"><i class="glyphicon glyphicon-trash"></i></button>    
												{% endif %}         												           				
                                				
                                			</td>
                                		</tr>
                                	{% endfor %}
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            <div class="well">
                                <h4>Ansible剧本管理说明</h4>
                                <p>剧本文件host字段请配置成：hosts: "{{ host 
                                }}"</p>
                                <a class="btn btn-default btn-lg btn-block" target="_blank" href="/apps/playbook/online/"><i class="fa fa-plus-circle "></i>新建剧本</a>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
    </div>  
    
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="width:1280px;height:auto;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					剧本文件内容
				</h4>
			</div>
			<div class="modal-body">
				<pre>
					<div id="play_content">
					</div>
				</pre>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
    
<script type="text/javascript">

	function deletePlayBook(obj,id){
		var txt=  "是否确认删除？";
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var option = {
			title: "删除任务",
			btn: parseInt("0011",2),
			onOk: function(){
				$.ajax({
					  type: 'DELETE',
					  url: '/api/playbook/'+id+'/',
				      success:function(response){	
				    	btnObj.removeAttr('disabled');
	                	window.wxc.xcConfirm("删除成功！", window.wxc.xcConfirm.typeEnum.success);
	                	location.reload('/apps/');				            
				      },
		              error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("删除失败！", window.wxc.xcConfirm.typeEnum.error);	
		              }
					});
			},
			onCancel:function(){	
			},
			onClose:function(){
			}
		}
		window.wxc.xcConfirm(txt, "custom", option);			   
	} 

	function getAnsiblePlayBookFile(obj,id) {
		var btnObj = $(obj);
		$.ajax({
			url:'/apps/playbook/file/'+id+'/', //请求地址
			type:"POST",  //提交类似
			data:{
				"id":id
			},  //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				if (response["code"] == "200"){
					btnObj.removeAttr('disabled');
					$("#play_content").html(response["data"]); 
				}
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("查看失败", window.wxc.xcConfirm.typeEnum.error);
	    	}
		})
	}

    $(document).ready(function() {
        $('#deployTableList').DataTable({
            responsive: true
        });
    });	
    
    $(function () { 
    	$("[data-toggle='popover']").popover();
    });   
    
  
	
	
	
	
</script>
{% endblock %}